{{extend './common/layout.html'}}

{{ block 'main' }}
<div class="login-body">
    <div class="login-container">
        <h4 class="title">黑马程序员 - 博客管理员登录</h4>
        <div class="login"> 
            <form id="form" action="/login" method="post">
                <div class="form-group">
                    <label>邮箱</label>
                    <input name="email" type="email" class="form-control" placeholder="请输入邮箱地址">
                </div>
                <div class="form-group">
                    <label>密码</label>
                    <input name="pwd" type="password" class="form-control" placeholder="请输入密码">
                </div>
                <button type="submit" class="btn btn-primary">登录</button>
            </form>
        </div>
        <div class="tips"></div>
    </div>
</div>
{{ /block }}

{{ block 'js' }}
<script>
    $(() => {
        const $form = $('#form');
        $form.submit(() => {
            const arr = $form.serializeArray(); // 拿到表单的数据 [{name: email, value: '用户输入的信息'}]

            const obj = arr.reduce((obj, v) => {
                obj[v.name] = v.value;
                return obj;
            }, {})
            // 数组的归纳方法，返回最终归纳的值
            //  第一个参数是函数，这个函数会循环调用，数组有多少个元素，就会调用多少次
            //    函数的第一个参数是当前归纳的值
            //    函数的第二个参数是每次循环的循环项
            //    注意：函数的返回值会作为下一次的归纳值
            //  第二个参数是归纳的起始值

            if(obj.email.trim() === '' || obj.pwd.trim() === ''){
                alert('邮箱或密码不能为空')
                return false; // 中断后面的代码 并且阻止表单的默认提交行为
            }
            console.log('验证通过');
            
        })
    })
</script>
{{ /block }}